{extend name='admin@public/content'}
{block name='style'}
<style type="text/css">
    #allmap{height:300px;width:60%;}
</style>
<style>
    .param-table-list {
        overflow: auto;
        max-height: 500px;
        position: relative;
        overflow-y: scroll;
    }

    .param-input-td {
        position: relative;
        padding: 0 !important;
    }

    .param-input-td.one {
        width: 15%;
    }

    .param-input-td.thr {
        width: 10%;
        text-align: center;
    }

    .param-input-td.four {
        width: 10%;
    }
    .param-input-td.five {
        width: 5%;
    }
    .param-input-td.six {
        width: 10%;
    }
    /*.param-input-td.one:before {*/
        /*content: ''*/
    /*}*/

    /*.param-input-td.two:before {*/
        /*content: ''*/
    /*}*/

    /*.param-input-td:before {*/
        /*margin: 4px;*/
        /*width: 40px;*/
        /*height: 30px;*/
        /*line-height: 30px;*/
        /*text-align: center;*/
        /*position: absolute;*/
        /*background: #e2e2e2;*/
    /*}*/

    .param-input-td input {
        /*padding-left: 50px;*/
        border: none !important;
    }
</style>
{/block}
{block name='content'}
<form onsubmit="return false;" action="" data-auto="true" method="post" class='form-horizontal layui-form' style='padding-top:20px'>

    <div class="form-group">
        <label class="col-sm-2 control-label">地图地址：<span class="nowrap color-desc"></span></label>
        <div class='col-sm-8'>
            <input type="text" name="address" oninput="changemap()" required title="请输入地址" placeholder="请输入地址" value="{:setting('address')}" class="layui-input">
            <p class="help-block" id="allmap"></p>
            <input type="hidden" name="lng" value="{:setting('lng')}">
            <input type="hidden" name="lat" value="{:setting('lat')}">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">公司名称：<span class="nowrap"></span></label>
        <div class='col-sm-8'>
            <input type="text" name="company" title="请输入公司名称" required placeholder="请输入" value="{:setting('company')}" class="layui-input">
            <p class="help-block"></p>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">公司英文名称：<span class="nowrap"></span></label>
        <div class='col-sm-8'>
            <input type="text" name="company_en" title="请输入公司英文名称" required placeholder="请输入" value="{:setting('company_en')}" class="layui-input">
            <p class="help-block"></p>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">资讯信息：<br><span class="nowrap color-desc">尺寸70*70</span></label>
        <div class='col-sm-8'>
            <div class="param-table-list">
                <table class="layui-table margin-none">
                    <tbody class="param-table-list">
                    {if !empty($db)}
                    {foreach $db as $k=>$v}
                    <tr class="transition">
                        <td class="param-input-td four nowrap">
                            <button data-file="one" data-type="png,jpg,jpeg" data-field="list[{$k}][thumb]" type="button" class="layui-btn layui-btn-sm" style="height:38px;line-height:38px;width:100%">上传图标</button>
                        </td>
                        <td class="param-input-td five nowrap text-center">
                            <img data-tips-image style="height:auto;max-height:38px;" src="{$v['thumb'] ?: '__STATIC__/theme/img/image.png'}"/>
                            <input type="hidden" name="list[{$k}][thumb]" onchange="$(this).prev('img').attr('src', this.value)" value="{$v['thumb']}" class="layui-input">
                        </td>
                        <td class="param-input-td one nowrap">
                            <input name="list[{$k}][name]" autocomplete="off" value="{$v.name}" placeholder="请输入" class="layui-input" >
                        </td>
                        <td class="param-input-td two nowrap">
                            <input name="list[{$k}][value]" autocomplete="off" value="{$v.value}" placeholder="请输入" class="layui-input">
                        </td>
                        <td class="param-input-td six nowrap text-center">
                            <input type="checkbox" {if isset($v.status)&&$v.status=='on'}checked{/if} name="list[{$k}][status]" lay-skin="switch" lay-text="显示|隐藏">
                        </td>
                        <td class="param-input-td thr nowrap text-center">
                            <a class="color-desc del">删除</a>
                            <a class="color-desc up">上移</a>
                            <a class="color-desc down">下移</a>
                        </td>
                    </tr>
                    {/foreach}
                    {else}
                    <tr class="transition">
                        <td class="param-input-td four nowrap">
                            <button data-file="one" data-type="png,jpg,jpeg" data-field="list[0][thumb]" type="button" class="layui-btn layui-btn-sm" style="height:38px;line-height:38px;width:100%">上传图标</button>
                        </td>
                        <td class="param-input-td five nowrap text-center">
                            <img data-tips-image style="height:auto;max-height:38px;" src="__STATIC__/theme/img/image.png"/>
                            <input type="hidden" name="list[0][thumb]" onchange="$(this).prev('img').attr('src', this.value)" value="" class="layui-input">
                        </td>
                        <td class="param-input-td one nowrap">
                            <input name="list[0][name]" autocomplete="off" placeholder="请输入" class="layui-input" >
                        </td>
                        <td class="param-input-td two nowrap">
                            <input name="list[0][value]" autocomplete="off" placeholder="请输入" class="layui-input" >
                        </td>
                        <td class="param-input-td six nowrap text-center">
                            <input type="checkbox" name="list[0][status]" lay-skin="switch" lay-text="显示|隐藏">
                        </td>
                        <td class="param-input-td thr nowrap text-center">
                            <a class="color-desc del">删除</a>
                            <a class="color-desc up">上移</a>
                            <a class="color-desc down">下移</a>
                        </td>
                    </tr>
                    {/if}
                    </tbody>
                </table>
            </div>
            <table class="layui-table">
                <tr>
                    <td class="text-center notselect padding-none border-none">
                        <button type="button" class="layui-btn full-width layui-btn-primary add">添加属性</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="col-sm-8 col-sm-offset-2">
        <div class="layui-form-item text-left">
            <button class="layui-btn" type="submit">保存</button>
        </div>
    </div>

</form>

{/block}
{block name="script"}
<script>
    window.form.render();
    var key;
    $(function () {
        key = $('.param-table-list .transition').length-1;
    })
    $('.add').on('click',function () {
        key++;
        var html_str = `<tr class="transition">
                        <td class="param-input-td four nowrap">
                            <button data-file="one" data-type="png,jpg,jpeg" data-field="list[${key}][thumb]" type="button" class="layui-btn layui-btn-sm" style="height:38px;line-height:38px;width:100%">上传图标</button>
                        </td>
                        <td class="param-input-td five nowrap text-center">
                            <img data-tips-image style="height:auto;max-height:38px;" src="__STATIC__/theme/img/image.png"/>
                            <input type="hidden" name="list[${key}][thumb]" onchange="$(this).prev('img').attr('src', this.value)" value="" class="layui-input">
                        </td>
                        <td class="param-input-td one nowrap">
                            <input name="list[${key}][name]" autocomplete="off" placeholder="请输入"  class="layui-input" >
                        </td>
                        <td class="param-input-td two nowrap">
                            <input name="list[${key}][value]" autocomplete="off" placeholder="请输入"  class="layui-input" >
                        </td>
                        <td class="param-input-td six nowrap text-center">
                            <input type="checkbox" name="list[${key}][status]" lay-skin="switch" lay-text="显示|隐藏">
                        </td>
                        <td class="param-input-td thr nowrap text-center">
                            <a class="color-desc del">删除</a>
                            <a class="color-desc up">上移</a>
                            <a class="color-desc down">下移</a>
                        </td>
                    </tr>`;
        $('tbody.param-table-list').append(html_str);
        form.render();
    })

    $('tbody.param-table-list').on('click','.del',function () {
        $(this).parents('.transition').remove();
    })

    $('tbody.param-table-list').on('click','.up',function () {
        var parentsDiv = $(this).parents(".transition");
        var prev = parentsDiv.prev();
        if(prev.html()!=undefined){
            //prev.before(parentsDiv);
            prev.fadeOut("fast",function(){
                $(this).before(parentsDiv);
            }).fadeIn();
        }
    })

    $('tbody.param-table-list').on('click','.down',function () {
        var parentsDiv = $(this).parents(".transition");
        var next = parentsDiv.next();
        if(next.html()!=undefined){
            //next.after(parentsDiv);
            next.fadeOut("fast",function(){
                $(this).after(parentsDiv);
            }).fadeIn();
        }
    })
</script>
<script>

    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point("122.3454","24.5455"),17);
    map.enableScrollWheelZoom(true);


    map.clearOverlays();
    var new_point = new BMap.Point("{$db.lng|default=''}","{$db.lat|default=''}");
    var marker = new BMap.Marker(new_point);  // 创建标注
    map.addOverlay(marker);              // 将标注添加到地图中
    map.panTo(new_point);

    function changemap() {
        var address = $.trim($('input[name="address"]').val());
        if (address != undefined && address != ''){
            var url = 'https://api.map.baidu.com/geocoder/v2/?ak=24E6ACE58880d4bf17181b0680863639&output=json&address=' + encodeURIComponent(address);
            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'JSONP',
                success:function (data) {
                    if(data.status==1){
                        return false;
                    }else {
                        var map = new BMap.Map("allmap");
                        map.centerAndZoom(new BMap.Point(data.result.location.lng,data.result.location.lat),17);
                        map.enableScrollWheelZoom(true);
                        map.clearOverlays();
                        var new_point = new BMap.Point(data.result.location.lng,data.result.location.lat);
                        var marker = new BMap.Marker(new_point);  // 创建标注
                        map.addOverlay(marker);              // 将标注添加到地图中
                        map.panTo(new_point);
                        $('input[name="lng"]').val(data.result.location.lng);
                        $('input[name="lat"]').val(data.result.location.lat);
                    }

                }
            })
        }
    }

    $(function () {
        changemap();
    })
</script>
{/block}
